<template>
  <div>
    <div class="filter_container">
      <el-form :inline="true" :model="remindersform">
        <el-form-item label="城市">
          <el-select v-model="remindersform.cityId" placeholder="请选择城市" size="small" style="width: 100px;"
            ref="deptNameRef" @keydown.native="selectBlur($event)">
            <el-option v-for="(house, citykey) in cityList" :key="citykey" :label="house.deptName" :value="house.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="后台单号">
          <el-input v-model.trim="remindersform.xmbzNo" size="small" style="width: 160px"
            @keyup.enter.native="handleFilterReminders()" clearable placeholder="请输入后台单号"></el-input>
        </el-form-item>
        <el-form-item label="申请人">
          <el-input v-model.trim="remindersform.operator" size="small" style="width: 160px"
            @keyup.enter.native="handleFilterReminders()" clearable placeholder="请输入申请人"></el-input>
        </el-form-item>
        <el-form-item label="配送员">
          <el-input v-model.trim="remindersform.delivery" size="small" style="width: 160px"
            @keyup.enter.native="handleFilterReminders()" clearable placeholder="请输入配送员"></el-input>
        </el-form-item>
        <el-form-item label="催单类型">
          <el-select ref="reminderTypeRef" v-model="remindersform.reminderType" placeholder="请选择催单类型" clearable
            size="small" style="width: 140px" @keydown.native="selectBlur($event)">
            <el-option v-for="item in remindertypeList" :key="item.dictKey" :label="item.dictValue"
              :value="item.dictKey" />
          </el-select>
        </el-form-item>
        <el-form-item label="创建工单时间">
          <el-date-picker v-model="Launchdate" type="datetimerange" range-separator="至" start-placeholder="开始时间"
            end-placeholder="结束时间" :default-time="['00:00:00', '23:59:59']" value-format="yyyy-MM-dd HH:mm"
            format="yyyy-MM-dd HH:mm" :clearable="false" align="right" size="small"></el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" plain icon="el-icon-search" @click="handleFilterReminders()" size="small">
            查询</el-button>
        </el-form-item>
      </el-form>
    </div>
    <!-- 表单内容 -->
    <el-table :data="reminderslist" border style="width: 100%" header-row-class-name="header-row-class-name"
      cell-class-name="table-cell-class-name">
      <el-table-column prop="cityName" label="城市" width="80" align="center"> </el-table-column>
      <el-table-column prop="warehouse" label="分仓" width="80" align="center"> </el-table-column>
      <el-table-column prop="xmbzNo" label="后台单号" width="80" align="center"> </el-table-column>
      <el-table-column prop="reminderType" label="催单类型" width="180" :formatter='changeTypeLange' align="center">
      </el-table-column>
      <el-table-column prop="reminderContent" label="催单内容" width="180" align="center"> </el-table-column>
      <el-table-column prop="operator" label="申请人" width="80" align="center"> </el-table-column>
      <el-table-column prop="createTime" label="创建工单时间" width="180" align='center'> </el-table-column>
      <el-table-column prop="deliveryTime" label="配送时间" width="180" align="center"> </el-table-column>
      <el-table-column prop="delivery" label="配送员" width="180" align="center"> </el-table-column>
      <el-table-column prop="channel" label="渠道" width="180" align="center"> </el-table-column>
    </el-table>
    <!-- 分页操作 -->
    <pagination v-show="reminderstotal > 0" :total="reminderstotal" :page.sync="remindersform.page"
      :limit.sync="remindersform.size" @pagination="getWorkOrderList" />
  </div>
</template>

<script>
import Pagination from "@/components/Pagination" // 分页
import {
  ReminderTypeList,
  WorkOrderList,
} from "@/api/workorder"

export default {
  props: {
    cityList: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      deptName: '',
      // cityList: [], // 城市选择
      reminderslist: [],
      remindertypeList: [], // 催单类型
      Launchdate: [
        this.dayjs(new Date())
          .format("YYYY-MM-DD 00:00:00")
          .toString(),
        this.dayjs(new Date())
          .format("YYYY-MM-DD 23:59:59")
          .toString()
      ],
      remindersform: {
        xmbzNo: "",
        reminderType: "", //后台单号
        operator: "", //申请人
        delivery: "", //配送员
        workOrderStartTime: this.dayjs(new Date())
          .format("YYYY-MM-DD 00:00:00")
          .toString(), //配送开始时间
        workOrderEndTime: this.dayjs(new Date())
          .format("YYYY-MM-DD 23:59:59")
          .toString(), //配送结束时间
        cityId: "", //城市id
        warehouse: "", //  分仓
        channel: "", //  渠道
        receiverPhone: "", //收货人手机号
        page: 1, //页码
        size: 10 //每页页码
      },
      reminderstotal: 0,
    };
  },
  watch: {
    cityList() {
      this.setDefaultCity()
    }
  },
  methods: {
    init() {
      this.setDefaultCity()
      this.reminderType() //催单类型
      this.getWorkOrderList()
    },
    setDefaultCity() {
      this.remindersform.cityId = this.cityList && this.cityList.length && this.cityList[0].id
    },
    getWorkOrderList() {
      // 催单工单列表分页
      (this.remindersform.workOrderStartTime = this.dayjs(
        this.remindersform.workOrderStartTime
      )
        .format("YYYY-MM-DD HH:mm:00")
        .toString()), //配送开始时间
        (this.remindersform.workOrderEndTime = this.dayjs(
          this.remindersform.workOrderEndTime
        )
          .format("YYYY-MM-DD HH:mm:59")
          .toString()), //配送结束时间
        WorkOrderList(this.remindersform).then(response => {
          this.reminderslist = response.data.data.rows
          this.reminderstotal = response.data.data.total
        })
    },
    handleFilterReminders() {
      // 催单工单列表查询
      this.remindersform.page = 1
      if (this.Launchdate) {
        this.remindersform.workOrderStartTime = this.dayjs(this.Launchdate[0])
          .format("YYYY-MM-DD HH:mm:00")
          .toString()
        this.remindersform.workOrderEndTime = this.dayjs(this.Launchdate[1])
          .format("YYYY-MM-DD HH:mm:59")
          .toString()
      }
      var time1 = Date.parse(this.remindersform.workOrderStartTime)
      var time2 = Date.parse(this.remindersform.workOrderEndTime)
      //讲两个时间相减，求出相隔的天数
      var dayCount = Math.abs(time2 - time1) / 1000 / 60 / 60 / 24
      if (dayCount > 31) {
        this.$message({
          showClose: true,
          message: "时间间隔不可超过31天",
          type: "warning"
        })
      } else {
        this.remindersform.page = 1
        this.getWorkOrderList()
      }
    },
    reminderType() {
      // ****催单类型
      ReminderTypeList("").then(response => {
        this.remindertypeList = response.data.data
      })
    },
    changeTypeLange(row,) {
      if (row.reminderType == 1) {
        return '配送时间前催单'
      } else if (row.reminderType == 2) {
        return '配送时间内催单'
      } else if (row.reminderType == 3) {
        return '超时催单'
      }
    },
  },
  mounted() {
    this.init()
  },
  components: {
    Pagination,
  },
};
</script>
<style lang="scss" scoped>
</style>